<template>
  <div class="app-container">
    <div :class="['filter-container']">
      <!-- 筛选框需要些双份 一种是没有展开状态下的  只有主要的几个筛选框，另一种是全部的筛选框都展示 也就是展开状态下的 -->
      <!-- 没有展开状态下的筛选框 -->
      <el-form ref="queryParam" :inline="true" :model="queryParam" label-width="80px">
        <el-form-item label="申请标题">
          <el-input v-model.trim="queryParam.title" placeholder="请输入申请标题" style="width:160px;" clearable />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryParam.status" placeholder="请选择">
            <el-option v-for="(val, key) in statusMap" :key="key" :label="val" :value="key" />
          </el-select>
        </el-form-item>
        <el-form-item label="审批结果">
          <el-select v-model="queryParam.result" placeholder="请选择">
            <el-option v-for="(val, key) in resultMap" :key="key" :label="val" :value="key" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="getList()">查询</el-button>
          <el-button type="primary" class="filter-item" style="margin-left: 10px;" @click="() => queryParam = {}">重置
          </el-button>
          <el-button @click="$refs.modal.add()">新建</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div :class="['table']">
      <div class="table-container">
        <el-table
          :key="tableKey"
          v-loading="listLoading"
          row-key="menuId"
          height="100%"
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          @selection-change="selectionChangeHandle"
        >
          <el-table-column type="selection" header-align="center" align="center" width="50" />
          <template v-for="(item,index) in columns">
            <el-table-column :prop="item.dataIndex" header-align="center" align="center" :label="item.title" />
          </template>

          <el-table-column header-align="center" align="center" width="150" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handelAudit(scope.row)">
                详情
              </el-button>
              <el-button :disabled="scope.row.status!==1" type="text" size="small" @click="handleUpdate(scope.row)">
                撤销
              </el-button>
              <el-button :disabled="scope.row.status===1" type="text" size="small" @click="deleteHandle(scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <business-modal ref="modal" />
    <leave-modal ref="leavemodal" :audit="false" />
    <purchase-modal ref="purchasemodal" :audit="false" />
  </div>
</template>
<script>
import { getBusinessListMy, delProcessIns, delBusiness, modalMap, resultMap, statusMap } from '@/api/activiti'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination 分页组件
import BusinessModal from './modules/BusinessModal.vue'
import LeaveModal from './modules/LeaveModal.vue'
import PurchaseModal from './modules/PurchaseModal.vue'
export default {
  name: 'BusinessList',
  components: {
    Pagination,
    BusinessModal,
    LeaveModal,
    PurchaseModal
  },
  data() {
    return {
      list: [],
      tableKey: 0,
      listLoading: false, // 表格加载数据时的 loading
      resultMap,
      statusMap,
      queryParam: {},
      dataListSelections: [], // 批量删除选中
      total: 0, // 总条数
      listQuery: {
        page: 1,
        limit: 10
      },
      // 表头
      columns: [
        {
          title: '申请标题',
          dataIndex: 'title'
        },
        {
          title: '所属流程',
          dataIndex: 'procName'
        },
        {
          title: '当前审批环节',
          dataIndex: 'currentTask'
        },
        {
          title: '审批结果',
          dataIndex: 'result',
          scopedSlots: { customRender: 'result' }
        },
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '申请时间',
          dataIndex: 'applyTime',
          sorter: true
        },
        {
          title: '操作',
          width: '200px',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  created() {

  },
  methods: {
    // 获取表格数据
    async getList() {
      this.listLoading = true
      // 筛选+分页
      const params = Object.assign(this.queryParam, this.listQuery)
      // 请求
      const res = await getBusinessListMy(params).catch(e => {
        console.log(e)
      })
      // 失败
      if (!res) { this.listLoading = false; return }
      // 成功
      const { data, code, message } = res
      this.list = data.list
      this.total = data.totalCount
      this.listLoading = false
    },
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
    handelAudit(record) {
      const modal = modalMap[record.procDefKey]
      this.$refs[modal].show({ businessKey: record.id })
    },

    // 删除数据 批量删除的话 不用传参
    deleteHandle(data) {
      const idS = data ? [data.id] : this.dataListSelections.map(item => { return item.id })
      const nameS = data ? [data.paramKey] : this.dataListSelections.map(item => { return item.paramKey })
      this.$confirm(`确定对[${nameS.join('、')}]进行[删除]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 提交删除
        const { code, message } = await deleteConfigList(idS)
        // 成功
        this.$message({
          message: '操作成功',
          type: 'success',
          duration: 1500,
          onClose: () => {
            this.handleFilter()// 刷新数据
          }
        })
      })
    }
  }
}
</script>

<style scoped>
.edit-input {
    padding-right: 100px;
}
.cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
}
</style>
